<template>
  <div style="width: 500px;">
    <v-md-preview :text="markdownText"></v-md-preview>
    <div style="float: right;margin-right: 20px">
      <el-tooltip effect="dark" content="复制" placement="top" style="z-index: 10000">
        <i class="el-icon-document-copy icon" @click="copyTextToClipboard(markdownText)"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// 复制代码快捷键
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';

// katex 公式解析
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/npm';
import 'katex/dist/katex.min.css';
// 代码显示行号
// import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
// VMdPreview.use(createLineNumbertPlugin());
VMdPreview.use(createCopyCodePlugin());
VMdPreview.use(createKatexPlugin());
// highlightjs 代码高亮
import hljs from 'highlight.js';

VMdPreview.use(githubTheme, {Hljs: hljs,});

export default {
  name: "MdPreview",
  components: {
    VMdPreview
  },
  data() {
    return {
      markdownText:
          '这是一个行内公式：$E = mc^2$\n' +
          '\n' +
          '这是一个块级公式：\n' +
          '\n' +
          '$$\n' +
          '\\int_{a}^{b} x^2 dx\n' +
          '$$\n'
      ,
    };
  },
  mounted() {


    let text =
        "### 1. 极限的基本性质\n" +
        "- **唯一性**：如果 \\(\\lim_{x \\to a} f(x) = L\\) 存在，则 \\(L\\) 是唯一的。\n" +
        "- **局部有界性**：如果 \\(\\lim_{x \\to a} f(x)\\) 存在，则在 \\(a\\) 的某个邻域内，\\(f(x)\\) 有界。\n" +
        "- **保号性**：如果 \\(\\lim_{x \\to a} f(x) = L > 0\\)，则在 \\(a\\) 的某个邻域内，\\(f(x) > 0\\)。\n" +
        "\n" +
        "### 2. 极限的四则运算法则\n" +
        "- **加减法**：如果 \\(\\lim_{x \\to a} f(x) = L\\) 且 \\(\\lim_{x \\to a} g(x) = M\\)，则\n" +
        "  \\[\n" +
        "  \\lim_{x \\to a} [f(x) \\pm g(x)] = L \\pm M\n" +
        "  \\]\n" +
        "- **乘法**：如果 \\(\\lim_{x \\to a} f(x) = L\\) 且 \\(\\lim_{x \\to a} g(x) = M\\)，则\n" +
        "  \\[\n" +
        "  \\lim_{x \\to a} [f(x) \\cdot g(x)] = L \\cdot M\n" +
        "  \\]\n" +
        "- **除法**：如果 \\(\\lim_{x \\to a} f(x) = L\\) 且 \\(\\lim_{x \\to a} g(x) = M\\)，且 \\(M \\neq 0\\)，则\n" +
        "  \\[\n" +
        "  \\lim_{x \\to a} \\frac{f(x)}{g(x)} = \\frac{L}{M}\n" +
        "  \\]\n" +
        "\n" +
        "### 3. 重要极限公式\n" +
        "- **指数函数极限**：\n" +
        "  \\[\n" +
        "  \\lim_{x \\to 0} \\frac{e^x - 1}{x} = 1\n" +
        "  \\]\n" +
        "- **对数函数极限**：\n" +
        "  \\[\n" +
        "  \\lim_{x \\to 1} \\frac{\\ln x}{x - 1} = 1\n" +
        "  \\]\n" +
        "- **三角函数极限**：\n" +
        "  \\[\n" +
        "  \\lim_{x \\to 0} \\frac{\\sin x}{x} = 1\n" +
        "  \\]\n" +
        "  \\[\n" +
        "  \\lim_{x \\to 0} \\frac{\\tan x}{x} = 1\n" +
        "  \\]\n" +
        "\n" +
        "### 4. 夹逼定理\n" +
        "如果在 \\(a\\) 的某个邻域内有 \\(g(x) \\leq f(x) \\leq h(x)\\)，且 \\(\\lim_{x \\to a} g(x) = \\lim_{x \\to a} h(x) = L\\)，那么\n" +
        "\\[\n" +
        "\\lim_{x \\to a} f(x) = L\n" +
        "\\]\n" +
        "\n" +
        "### 5. 洛必达法则\n" +
        "如果 \\(\\lim_{x \\to a} f(x) = 0\\) 且 \\(\\lim_{x \\to a} g(x) = 0\\)，" +
        "或 \\(\\lim_{x \\to a} f(x) = \\pm\\infty\\) " +
        "且 \\(\\lim_{x \\to a} g(x) = \\pm\\infty\\)" +
        "，并且 \\(\\lim_{x \\to a} \\frac{f'(x)}{g'(x)}\\) 存在（或为 \\(\\pm\\infty\\)），那么\n"


    // const regex = /\$([^\\$]+?)\$/g;
    // const regex = /[\\[].*[\\]]/g;
    console.log(text)
    const regex = /\\\[([\w\s\S])*?\\\]/g;// eslint-disable-line
    text = text.replace(regex, (match) => {
      try {

        // match = match.replace("\n\\[ ", () => '\n$$')
        // match = match.replace(" \\]\n", () => '$$\n')
        match = match.replace("\\[\n", () => '$$\n')
        match = match.replace("\n\\]", () => '\n$$')
        match = match.replace("\\[ ", () => '$')
        match = match.replace(" \\]", () => '$')
        match = match.replace("\\[", () => '$')
        match = match.replace("\\]", () => '$')
        console.log(match)
        return match
      } catch (e) {
        return match;
      }
    });

    const regex2 = /\\\(([\w\s\S])*?\\\)/g;// eslint-disable-line
    text = text.replace(regex2, (match) => {
      try {

        console.log("匹配字符", match)
        match = match.replace("\\( ", () => '$')
        match = match.replace(" \\)", () => '$')
        match = match.replace("\\(", () => '$')
        match = match.replace("\\)", () => '$')
        return match
      } catch (e) {
        return match;
      }
    });
    this.markdownText += text
  },
  methods: {
    copyTextToClipboard(text) {
      console.log(text)
      navigator.clipboard.writeText(text)
          .then(() => {

            console.log('文本已成功复制到剪贴板');
          })
          .catch(err => {
            console.error('复制失败：', err);
          });
    }
  }
};
</script>

<style scoped>
::v-deep .github-markdown-body {
  padding: 16px;
}

::v-deep .github-markdown-body blockquote {
  margin: 16px;
}

.icon {
  padding: 3px;

  &:hover {
    border-radius: 2px;
    background-color: #d1d1d3;
    cursor: pointer;
  }
}
</style>
